<template>
	<view class="content-box">
		<navBack></navBack>
		<view class="top-box">
			<image class="bg" src="/static/me/bg.png" mode="widthFix"></image>
			<view class="tabs-box">
				<u-tabs :list="tabList" :scrollable="false" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"
					lineWidth="40rpx" lineHeight="12rpx" :lineColor="`url(${lineBg}) 100% 100%`"
					@click="clickTabs" :current="current"></u-tabs>
			</view>
		</view>
		<scroll-view scroll-y="true" style="height: calc(100vh - 320rpx);"  @scrolltolower="upData()">
			<view class="scroll-box">

				<view class="order-box" v-for="item in orderList"
					@click="$routeTo('/pages/orderDetails/orderDetails?id='+item.id)">
					<view class="order-type">
						{{item.status==10?'已完成':'已取消'}}
					</view>
					<view class="order-num">
						订单号:{{item.orderNo}}
					</view>
					<view class="order-title">
						{{item.driverTypeName}}
					</view>
					<view class="location-box">
						<image src="/static/order/send-ico_.png" mode=""></image>
						{{item.startLocation}}
					</view>
					<view class="location-line">

					</view>
					<view class="location-box">
						<image src="/static/order/receive-ico_.png" mode=""></image>
						{{item.endLocation}}
					</view>


				</view>


				<u-empty v-if="orderList.length===0" mode="order" marginTop="250rpx" icon="http://cdn.uviewui.com/uview/empty/order.png">
				</u-empty>
			</view>

		</scroll-view>

		<Loading />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lineBg: '',
				tabList: [
					{
						name: '已完成',
						value: 10
					},{
					name: '已取消',
					value: 99
				}],
				status: 99,
				current:0,
				activeStyle: {
					color: '#000000',
					fontSize: '32rpx',
					fontWeight: 'bold'
				},
				inactiveStyle: {
					color: '#666666',
					fontSize: '28rpx',
					fontWeight: '100'
				},
				orderList:[],
				page:1
			}
		},
		onLoad(e) {
			if(e.current) this.current=e.current
			this.upData()
		},
		methods: {
			upData() {
				if (this.page == 0) return uni.showToast({
					title: '暂无更多',
					icon: 'none'
				});
				let data = {
					page: this.page,
					size: 10,
					status: this.status
				}
				this.$myRequest('/api/driver/mine/v1/page/historyOrder', data).then(res => {
					let data = res.data.data || []
					this.orderList.push(...data)
					if (data.length === 10) {
						this.page += 1
					} else {
						this.page = 0
					}
				})

			},
			clickTabs(res) {
				this.status = res.value
				this.current=res.index
				this.page=1
				this.orderList=[]
				this.upData()
			},
		}
	}
</script>

<style lang="scss">
	.popup-box {
		width: 502rpx;
		height: 336rpx;

		image {
			width: 158rpx;
			height: 144rpx;
			margin: 38rpx auto 32rpx auto;
		}

		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		text-align: center;
	}

	.top-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 22rpx 40rpx;
		padding-left: 0;
		box-shadow: 0rpx 6rpx 12rpx rgba(184, 184, 184, 0.16);
		position: relative;
		z-index: 1;
		padding-top: 214rpx;
		overflow: hidden;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}

		.tabs-box {
			width: 360rpx;
		}
	}

	.scroll-box {
		padding: 20rpx;
		// min-height: calc(100vh - 130rpx);
		background-color: #ffffff;

		.order-box {
			margin-bottom: 24rpx;
			background-color: #ffffff;
			position: relative;
			border-radius: 20rpx;
			padding: 10rpx 20rpx 20rpx 20rpx;
			box-shadow: 0rpx 0rpx 12rpx rgba(207, 207, 207, 0.53);

			.order-type {
				width: 124rpx;
				height: 50rpx;
				text-align: center;
				position: absolute;
				left: 0;
				top: 0;
				background: rgba(164, 149, 255, 0.2);
				border-radius: 20rpx 0rpx 20rpx 0rpx;
				font-size: 26rpx;
				line-height: 50rpx;
				color: #788EFF;
			}

			.order-num {
				font-size: 24rpx;
				color: #999999;
				text-align: right;
			}

			.order-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				margin: 26rpx 0 22rpx 0;
			}

			.location-box {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 22rpx;
				}
			}

			.location-line {
				width: 2rpx;
				height: 32rpx;
				background: #CBCBCB;
				margin: 10rpx 19rpx;
			}

		}
	}
</style>